<template>
  <div class="weather-container" v-if="realTimeWeather.city">
    <header>
      <p>
        你正在预览{{ realTimeWeather.city }}的天气信息<span v-if="spanShow"
          >,可以通过右上角的"+"号按钮保存起来</span
        >
      </p>
    </header>
    <div class="wrap content">
      <div class="weather-detail">
        <p>当日的气温是: {{ realTimeWeather.temperature }}摄氏度</p>
        <p>当日的天气是: {{ realTimeWeather.weather }}</p>
        <p>当日风向是: {{ realTimeWeather.winddirection }}风</p>
        <p>当日风力是: {{ realTimeWeather.windpower }}级</p>
      </div>
      <Charts
        :weatherInFourDays="cityWeatherInFourDaysSearch"
        :showTitle="false"
      />
    </div>
  </div>
  <div class="loading" v-else>
    <h1>天气信息加载中...</h1>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { getBaseWeatherByAdcode, getAllWeatherByAdcode } from '@/api/index.js';
import { WeatherStore } from '@/stores/counter.js';
import { storeToRefs } from 'pinia';
const weatherStore = WeatherStore();
const { cityWeatherList } = storeToRefs(weatherStore);

import Charts from '@/components/Charts.vue';

const route = useRoute();
const realTimeWeather = ref({});
const cityWeatherInFourDaysSearch = ref([]);

// span是否显示
const spanShow = computed(() => {
  return !cityWeatherList.value.find(
    (item) => item.city === route.query.search
  );
});

// 获取城市天气信息
watch(
  route,
  async () => {
    const res = await getBaseWeatherByAdcode(route.params.Adcode);
    realTimeWeather.value = res.lives[0];
    const res1 = await getAllWeatherByAdcode(route.params.Adcode);
    cityWeatherInFourDaysSearch.value = res1.forecasts[0].casts;
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.weather-container {
  height: 120vh;
  color: #fff;
  background-color: #00668a;
  header {
    width: 100%;
    background-color: #004e71;
    text-align: center;
    padding: 8px;
  }
  p {
    font-size: 16px;
    margin: 10px;
  }
  .content {
    .weather-detail {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      padding: 5px;
    }
  }
}
.loading {
  height: 150vh;
  color: #fff;
  background-color: #00668a;
  h1 {
    font-size: 20px;
    padding-top: 20px;
    text-align: center;
  }
}
</style>